<template>
  <div id="allBox">
    <!--头部-->
    <div class="topBox">
      <div class="tb">
        <span class="el-icon-collection-tag"></span>
        <span>我的购物车</span>
        <span class="xbt"
          >温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span
        >
      </div>
    </div>
    <!--主体部分-->
    <div class="wbodyBox" v-if="!allShopList">
      <div class="wbB">
        <div></div>
        <div>
          <h2>您的购物车还是空的!</h2>
          <p>快去购物吧!</p>
        </div>
      </div>
    </div>
    <!--购物车商品区-->
    <div class="allShop" v-if="allShopList">
      <el-table
        ref="multipleTable"
        :data="allShopList"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column>
          <template v-slot="scope">
            <img
              :src="'http://106.15.179.105:3000/' + scope.row.productImg"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品名称"> </el-table-column>
        <el-table-column prop="price" label="单价"> </el-table-column>
        <el-table-column prop="num" label="数量">
          <template v-slot="scope">
            <el-input-number
              v-model="scope.row.num"
              :min="1"
              :max="5"
              @change="handleChange($event, scope.row)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计">
          <template v-slot="scope">
            {{ scope.row.price * scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template v-slot="scope">
            <span
              class="el-icon-error"
              @click="deleteShop(scope.row.productID)"
            ></span>
            <!-- <el-popover placement="top" width="160" v-model="visible">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  type="primary"
                  size="mini"
                  @click="deleteShop(productID)"
                  >确定</el-button
                >
              </div>
              <span
                slot="reference"
                class="el-icon-error"
                @click="visible = true"
              ></span>
            </el-popover> -->
          </template>
        </el-table-column>
      </el-table>
      <!--总价区-->
      <div class="totalValue">
        <div class="leftBox">
          <span @click="$router.push('/allShop')">继续购物</span>
          <span>|</span>
          <span
            >共<b>{{ this.num }}</b
            >件商品,已选择<b>{{ this.amount }}</b
            >件</span
          >
        </div>
        <div class="rightBox">
          <span>合计：</span>
          <span>{{ this.totalValue }}元</span>
          <!-- <button>去结算</button> -->
          <el-button type="info" disabled v-show="amount == 0"
            >去结算</el-button
          >
          <el-button
            v-show="amount !== 0"
            type="danger"
            @click="$router.push('/addOrder')"
            >去结算</el-button
          >
        </div>
      </div>
    </div>
    <login-module ref="loginRef"></login-module>
  </div>
</template>
<script>
import shoppingCartAPI from "../../api/shoppingCart";
export default {
  components: {},
  name: "",
  data() {
    return {
      allShopList: [],
      allShop: [],
      num: 0,
    };
  },
  created() {
    this.getAllList();
    // console.log(this.allShopList);
  },
  activated() {
    this.getAllList();
  },
  methods: {
    //获取所有数据
    async getAllList() {
      let { data: res } = await shoppingCartAPI.getAllList({
        user_id: this.$store.state.user_id,
      });
      // console.log(res.shoppingCartData);
      this.allShopList = res.shoppingCartData;
      this.num = 0;
      this.allShopList.forEach((item) => {
        this.num += item.num;
      });
      this.$store.commit('totality',this.num)
    },
    //删除商品
    async deleteShop(productID) {
      //   this.visible = false;
      let { data: res } = await shoppingCartAPI.getDelList({
        user_id: this.$store.state.user_id,
        product_id: productID,
      });
      console.log(res);
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
        this.getAllList();
      }
    },
    //增删商品
    async handleChange(val, num) {
      console.log(val);
      let { data: res } = await shoppingCartAPI.getUpdateList({
        num: val,
        product_id: num.productID,
        user_id: this.$store.state.user_id,
      });
      console.log(res);
      if (res.code == "001") {
        this.$notify({
          message: res.msg,
          type: "success",
        });
         this.getAllList();
      } else {
        this.$notify({
          message: res.msg,
          type: "error",
        });
      }
    },
    //选中状态的数据存到vuex
    handleSelectionChange(val) {
      console.log(val);
      this.allShop = val;
      console.log(this.allShop);
      this.$store.commit("setAddOrder", val);
    },
  },
  computed: {
    //总件
    amount: function() {
      // console.log(this.allShop);
      var a = 0;
      this.allShop.forEach((item) => {
        return (a += item.num);
      });
      return a;
    },
    //总价
    totalValue: function() {
      // console.log(this.allShop);
      var b = 0;
      this.allShop.forEach((item) => {
        return (b += item.num * item.price);
      });
      return b;
    },
  },

};
</script>

<style lang="scss" scoped>
#allBox {
  background-color: #f5f5f5;
  .topBox {
    width: 100%;
    height: 64px;
    border-bottom: 2px solid orangered;
    background-color: white;
    .tb {
      width: 1225px;
      margin: 0 auto;
      height: 64px;
      line-height: 64px;
      font-size: 28px;
    }
    span:nth-child(1) {
      color: orangered;
      margin-right: 10px;
    }
    span:nth-child(3) {
      color: #757575;
      font-size: 12px;
      margin-left: 20px;
    }
  }
  .wbodyBox {
    padding-top: 64px;
    width: 1225px;
    min-height: 450px;
    margin: auto;
    .wbB {
      width: 100%;
      align-items: center;
      display: flex;
      div:nth-child(1) {
        width: 50%;
        height: 450px;
        background: url(../../../public/cart-empty.png) no-repeat 214px 0;
      }
      div:nth-child(2) {
        flex: 1;
        height: 450px;
        margin: auto 0;
        h2 {
          margin: 70px 0 15px;
          font-size: 36px;
          color: #b0b0b0;
        }
        p {
          margin: 0 0 20px;
          font-size: 20px;
          color: #b0b0b0;
        }
      }
    }
  }
  .allShop {
    width: 1225px;
    min-height: 550px;
    margin: auto;
    padding: 20px 0px;
    .el-table {
      text-align: center;

      img {
        width: 80px;
        height: 80px;
      }
    }
    .totalValue {
      width: 1225px;
      height: 50px;
      background-color: white;
      margin: 20px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .leftBox {
        font-size: 16px;
        color: #757575;
        margin-left: 32px;
        span:nth-child(1):hover {
          color: salmon;
          cursor: pointer;
        }
        span:nth-child(2) {
          color: #eee;
          margin: 0 20px;
        }
        span:nth-child(3) {
          font-size: 16px;
          color: #757575;
          b {
            font-size: 18px;
            color: red;
            margin: 0px 10px;
          }
        }
      }
      .rightBox {
        span:nth-child(1) {
          color: #ff6700;
          font-size: 14px;
        }
        span:nth-child(2) {
          color: #ff6700;
          font-size: 30px;
        }
        .el-button {
          padding: 17px;
          width: 160px;
          margin-left: 40px;
        }
      }
    }
  }
}
</style>
